<template>
  <div>
    <div class="logo-container">
      <el-avatar
        style="border-radius: 12px"
        :size="logoHeight"
        shape="square"
        src="https://m.imooc.com/static/wap/static/common/img/logo-small@2x.png"
      >
      </el-avatar>
      <!-- <h1 class="logo-title" v-if="$store.getters.sidebarOpened">{{$t('commen.example1')}}</h1> -->
      <h1 class="logo-title" v-if="$store.getters.sidebarOpened">imocc-admin</h1>
    </div>
    <!-- el-scrollbar滚动条组件 -->
    <el-scrollbar>
      <el-menu
        :default-active="$route.path"
        router
        :background-color="this.$store.getters.cssVar.menuBg"
        :text-color="this.$store.getters.cssVar.menuText"
        :active-text-color="this.$store.getters.cssVar.menuActiveText"
        :unique-opened="true"
        :collapse="!$store.getters.sidebarOpened"
      >
        <sidebar-menu
          v-for="item in menus"
          :key="item.path"
          :route="item"
        ></sidebar-menu>
      </el-menu>
    </el-scrollbar>
  </div>
</template>

<script>
import { isNull, getMenus } from "../../utils/route";
import SidebarMenu from "./SidebarMenu.vue";
export default {
  components: { SidebarMenu },
  data() {
    return {
      routers: [],
      logoHeight: 44,
      // menu: [
      //   {
      //     path: "/profile",
      //     name: "profile",
      //     meta: {
      //       title: "个人中心",
      //       icon: "icon-gerenzhongxin",
      //     },
      //   },
      //   {
      //     path: "/user",
      //     redirect: "/user/manage",
      //     meta: {
      //       title: "用户",
      //       icon: "icon-users",
      //     },
      //     props: {
      //       default: false,
      //     },
      //     children: [
      //       {
      //         path: "/user/manage",
      //         name: "userManage",
      //         meta: {
      //           title: "员工管理",
      //           icon: "icon-yuangongguanli",
      //         },
      //         children: [],
      //       },
      //       {
      //         path: "/user/role",
      //         name: "userRole",
      //         meta: {
      //           title: "角色列表",
      //           icon: "icon-tongxunlu",
      //         },
      //         children: [],
      //       },
      //       {
      //         path: "/user/permission",
      //         name: "userPermission",
      //         meta: {
      //           title: "权限列表",
      //           icon: "icon-quanxianguanli",
      //         },
      //         children: [],
      //       },
      //     ],
      //   },
      //   {
      //     path: "/article",
      //     redirect: "/article/ranking",
      //     meta: {
      //       title: "文章",
      //       icon: "icon-describe",
      //     },
      //     props: {
      //       default: false,
      //     },
      //     children: [
      //       {
      //         path: "/article/ranking",
      //         name: "articleRanking",
      //         meta: {
      //           title: "文章排名",
      //           icon: "icon-liebiao",
      //         },
      //         children: [],
      //       },
      //       {
      //         path: "/article/create",
      //         name: "articleCreate",
      //         meta: {
      //           title: "创建文章",
      //           icon: "icon-bianjiwenzhang_huaban",
      //         },
      //         children: [],
      //       },
      //     ],
      //   },
      // ],
    };
  },
  created() {
    this.routers = this.$router.options.routes;
    this.$i18n.locale = 'zh'
    // this.switchLang();
  },
  computed: {
    menus() {
      return getMenus(this.routers);
    },
  },
  methods: {
    switchLang(val){
      this.$i18n.locale = val
    }
  },
};
</script>

<style scoped lang='scss'>
.logo-container {
  height: v-bind(logoHeight) + "px";
  padding: 10px 0 22px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  .logo-title {
    margin-left: 10px;
    color: #fff;
    font-weight: 600;
    line-height: 50px;
    font-size: 16px;
    white-space: nowrap;
  }
}
</style>
